<template>
  <div class="app-container claimType">
    <AppSearchForm
      v-model:filter="filter"
      @handle-search="handleSearch"
      @handle-add="handleAdd"
      @handle-clear="handleClear"
    />
    <PaginationCard
      v-model:current-page="paginationData.currentPage"
      v-model:page-size="paginationData.pageSize"
      :load-list="getTableData"
      :total="paginationData.total"
    >
      <AppTable
        v-loading="isLoading"
        :data="tableData"
        :columns="columns"
        border
      />
    </PaginationCard>
    <ClaimTypeForm
      v-model:visible="visible"
      v-model:edit-id="editId"
      @success="handleSuccess"
    />
  </div>
</template>

<script setup lang="tsx">
import { Check, Close } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

import AppButtonGroup from '@/components/AppButtonGroup/index.vue'
import { IButtonConfig } from '@/components/AppButtonGroup/type'
import AppSearchForm from '@/components/AppSearchForm/index.vue'
import AppTable from '@/components/AppTable/index.vue'
import PaginationCard from '@/components/PaginationCard/index.vue'
import { deleteClaimType, pagedClaimTypes } from '@/http/claimType'
import { IClaimType } from '@/http/types/claimTypes'

import ClaimTypeForm from './ClaimTypeForm.vue'

const buttonConfig: IButtonConfig[] = [
  {
    name: '编辑',
    eventName: 'handleEdit',
    type: 'primary',
    isShow: (row: IClaimType) => !row.isStatic,
  },
  {
    name: '删除',
    eventName: 'handleDelete',
    type: 'primary',
  },
]
const columns = ref([
  { label: '名称', prop: 'name' },
  { label: '值类型', prop: 'valueTypeAsString' },
  { label: '描述', prop: 'description' },
  { label: '正则', prop: 'regex' },
  {
    label: '必要',
    prop: 'required',
    width: 120,
    render: ({ row }: { row: IClaimType }) => {
      return row.required ? (
        <el-icon color="#009688">
          <Check />
        </el-icon>
      ) : (
        <el-icon color="#c2185b">
          <Close />
        </el-icon>
      )
    },
  },
  {
    label: '是否静态',
    width: 120,
    prop: 'isStatic',
    render: ({ row }: { row: IClaimType }) => {
      return row.isStatic ? (
        <el-icon color="#009688">
          <Check />
        </el-icon>
      ) : (
        <el-icon color="#c2185b">
          <Close />
        </el-icon>
      )
    },
  },
  {
    label: '操作',
    fixed: 'right',
    render: ({ row }: { row: IClaimType }) => {
      return (
        <AppButtonGroup
          rowData={row}
          buttonConfigs={buttonConfig}
          onEvent={(eventName: string) => {
            eventName === 'handleDelete' && handleDelete(row)
            eventName === 'handleEdit' && handleEdit(row)
          }}
        ></AppButtonGroup>
      )
    },
  },
])

const filter = ref('')
const paginationData = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 0,
})
const tableData = ref<IClaimType[]>([])

const isLoading = ref(false)
const getTableData = async () => {
  isLoading.value = true
  const res = await pagedClaimTypes(
    paginationData.currentPage,
    paginationData.pageSize,
    filter.value,
  ).finally(() => {
    isLoading.value = false
  })
  tableData.value = res.items
  paginationData.total = res.totalCount
}
const handleSearch = () => {
  paginationData.currentPage = 1
  getTableData()
}

const visible = ref(false)
const handleAdd = () => {
  visible.value = true
}
const handleClear = () => {
  filter.value = ''
  handleSearch()
}

const handleDelete = (row: IClaimType) => {
  const id = row.id
  ElMessageBox.confirm('删除该声明类型, 是否继续?', '提示', {
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(async () => {
    await deleteClaimType(id)
    await getTableData()
  })
}

const editId = ref('')
const handleEdit = (row: IClaimType) => {
  editId.value = row.id
  visible.value = true
}

const handleSuccess = () => {
  visible.value = false
  getTableData()
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped></style>
